<template>
	<view>
		<view class="container">
			<uni-steps :active="currentStep" :options="steps" style="padding: 20rpx;"></uni-steps>
		</view>
		<view v-show="currentStep === 0">
			<view class="container">
				<uni-section title="基本信息" type="line">
					<view class="example">
						<!-- 基础用法，不包含校验规则 -->
						<uni-forms ref="form" :modelValue="baseFormData" labelWidth="100px">
							<uni-forms-item label="事项标题" name="sxbt" required>
								<uni-easyinput v-model="baseFormData.sxbt" placeholder="请输入事项标题" />
							</uni-forms-item>
							<uni-forms-item label="事项性质" name="sxxz" required>
								<uni-data-select
										v-model="baseFormData.sxxz"
										:localdata="sxxzDict"
										@change="changeSxxzDict"
									  ></uni-data-select>
							</uni-forms-item>
              <uni-forms-item label="下达部门" name="xdbm" required>
                <uni-data-select
                    v-model="baseFormData.xdbm"
                    :localdata="deptList"
                ></uni-data-select>
              </uni-forms-item>
              <uni-forms-item label="事项类型" name="sxlx" required>
                <uni-data-select
                    v-model="baseFormData.sxlx"
                    :localdata="sxlxDict"
                    @change="changeSxlxDict"
                ></uni-data-select>
              </uni-forms-item>
							<uni-forms-item label="紧急程度" name="jjcd" required>
								<uni-data-checkbox v-model="baseFormData.jjcd" :localdata="jjcdDict" @change="changeJjcdDict" />
							</uni-forms-item>
							<uni-forms-item label="间隔时间" name="jgsj" required v-if="baseFormData.jjcd === '2'">
								<uni-data-select
										v-model="baseFormData.jgsj"
										:localdata="jgsjDict"
										@change="changeJgsjDict"
									  ></uni-data-select>
							</uni-forms-item>
							<uni-forms-item label="是否反馈" name="sffk" required>
								<uni-data-checkbox v-model="baseFormData.sffk" :localdata="sffkDict" @change="changeSffkDict" />
							</uni-forms-item>
							<uni-forms-item label="截止日期" name="jzrq" required v-if="baseFormData.sffk === '1'">
								<uni-datetime-picker type="date" v-model="baseFormData.jzrq"/>
							</uni-forms-item>
              <uni-forms-item label="相关文件">
                <el-upload
                    class="upload-demo"
                    :action="uploadParam.uploadUrl"
                    :headers="uploadParam.headers"
                    :before-upload="rwBeforeUpload"
                    :on-change="handleChange"
                    :on-error="handleUploadError"
                    :on-success="handleUploadSuccess"
                    :auto-upload="true"
                    :on-remove="removeFile"
                    ref="upload"
                    multiple
                    :file-list="uploadParam.fileList"
                >
                  <el-button slot="trigger" ref="uploadInput" size="small">选择文件</el-button>
                </el-upload>
              </uni-forms-item>
              <uni-forms-item label="下达内容">
                <uni-easyinput  autoHeight  type="textarea"  v-model="baseFormData.xdnr"/>
							</uni-forms-item>
						</uni-forms>
					</view>
					<view class="action-btn fixed-bottom">
						<button @click="goToNextStep" style="font-size: 15px" class="bg-blue lg round">下一步</button>
					</view>
				</uni-section>
			</view>
		</view>

		<view v-show="currentStep === 1">
			<view class="container">
				<view class="uni-padding-wrap uni-common-mt">
					<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" />
				</view>
<!--        <div class="head-container" style="margin-top: 10px;">-->
<!--          <el-input-->
<!--              :adjust-position="false"-->
<!--              v-model="queryDeptName"-->
<!--              placeholder="请输入部门名称"-->
<!--              clearable-->
<!--              size="small"-->
<!--              prefix-icon="el-icon-search"-->
<!--              style="margin-bottom: 20px"-->
<!--          />-->
<!--        </div>-->
				<view class="content" style="overflow-y: scroll;height: 500px">
          <view style="transform: scale(1.3);transform-origin: top left;">
            <view v-show="current === 0">
              <el-button v-if="deptTreeValue==1 || deptTreeValue==2" style="display: block" type="text" @click="handleCommand" icon="el-icon-sort">点击切换部门</el-button>
              <div v-else>暂无部门</div>
              <el-button type="text" style="color: #000">{{deptTreeValue==1?deptName:deptTreeValue==2?deptName1:''}}</el-button>
              <el-tree check-strictly :filter-node-method="filterNode" :load="loadNode" lazy  v-show="deptTreeValue ==1"  ref="tree" node-key="id" :data="deptTree"  :default-expanded-keys="checkTreeIds" :default-checked-keys="checkTreeIds" show-checkbox :props="defaultProps" @check="check"></el-tree>
              <el-tree check-strictly :filter-node-method="filterNode" :load="loadNode1" lazy  v-show="deptTreeValue ==2"  ref="tree1" node-key="id" :data="deptTree1"  :default-expanded-keys="checkTreeIds" :default-checked-keys="checkTreeIds" show-checkbox :props="defaultProps" @check="check"></el-tree>
            </view>
            <view v-show="current === 1">
              <view class="article">
                <el-checkbox-group v-model="checkList">
                  <el-checkbox class="tabClass" v-for="(tab,index) in tabList" :label="tab.id" :key="index">{{ tab.name }}
                  </el-checkbox>
                </el-checkbox-group>
              </view>
            </view>
          </view>
				</view>

				<view class="action-btn fixed-bottom">
					<view class="two_button">
              <button @click="goToBackStep" type="default" plain="true" class="round"
                      style="width: 45%;font-size: 15px">上一步</button>
            <button v-loading.fullscreen.lock="addUserLoading"  @click="addSelectUser" element-loading-text="加载中" element-loading-spinner="el-icon-loading" class="bg-blue lg round" style="width: 45%;font-size: 15px">添加到下达列表</button>
					</view>
				</view>
			</view>
		</view>
    <view v-show="currentStep === 2">
      <view class="container">
        <h3 style="text-align: center;padding-top: 30px">本次共下达给{{count}}人</h3>
        <el-input style="margin: 20px;width: 90%" clearable v-model="addTxlPageParams.name" placeholder="请输入人员姓名"/>
<!--        <div style="margin-top: 10px;text-align: center;padding: 10px" :underline="false">-->
<!--          <el-link @click="showUserTable = true" :underline="false" type="primary"><i class="el-icon-view el-icon&#45;&#45;right"></i>点击查看人员详情</el-link>-->
<!--        </div>-->
<!--        <div style="text-align: right">-->
<!--          <el-button style="margin: 10px 10px" size="mini" type="info" @click="delSelectTxlTablee" v-show="showUserTable">删除</el-button>-->
<!--        </div>-->
        <scroll-view v-show="showUserTable" scroll-y="true" @scrolltolower="scrolltolower" style="height: 500px">
          <el-table
              :row-key="rowKey"
              v-loading="isLoading"
              ref="txlTable"
              :data="txlTableData"
              tooltip-effect="dark"
              @selection-change="selectionChange"
              style="width: 100%">
            <el-table-column
                label="序号"
                type="selection"
                :reserve-selection="true"
                width="55">
            </el-table-column>
            <el-table-column
                label="姓名"
                prop="name">
            </el-table-column>
            <el-table-column
                label="企业名称"
                prop="qymc">
            </el-table-column>
            <el-table-column
                prop="position"
                label="职务">
            </el-table-column>
            <el-table-column
                prop="phone"
                label="电话">
            </el-table-column>
          </el-table>
        </scroll-view>
        <view class="action-btn fixed-bottom" v-if="showBtn">
          <view class="two_button">
            <button @click="goToBackStep" type="default" plain="true" class="round" style="width: 45%;font-size: 15px">上一步</button>
            <el-button v-loading.fullscreen.lock="submitLoading" @click="submit" type="primary" round style="width: 45%;font-size: 15px">下达任务</el-button>
          </view>
        </view>
      </view>
    </view>

    <!-- 提示窗示例 -->
    <uni-popup ref="alertDialog" type="dialog">
        <uni-popup-dialog :type="msgType" cancelText="取消" confirmText="确定" title="请核对下达信息" :content="msgContent" @confirm="dialogConfirm" @close="dialogClose">
          <view style="height: 130px;overflow: scroll;">
            <uni-forms-item>
              <view style="margin-bottom: 10px;"><span style="font-weight: bold">下达内容：</span>{{ baseFormData.xdnr }}</view>
              <view style="line-height: 20px">你确定下达给“<span style="color: dodgerblue">{{ checkdeptNames }}</span>”部门下的 <span style="color: dodgerblue">{{ checkuserNames }}</span> 么？</view>
            </uni-forms-item>
          </view>
        </uni-popup-dialog>
    </uni-popup>
	</view>
</template>

<script>
	import { getDicts } from "@/api/system/dict/data";
	import { addxdwj, getXdrwByWorkid, messageSendByLimit ,getDepartmentList,getDepartmentList1,getUserLabelList,ssmSendByLimit,getUserDepartment,andUserByDeptAndLaber,getSelectUserPage,delRedisUserByKey,delSelectUser} from "@/api/system/xdwj";
	import config from '@/config';
	import { getToken, getUserId, getUsername ,getDeptList,setDeptList} from '@/utils/auth'


	export default {
		data() {
			return {
        count: 0,
        showBtn: true,
        isLoading:false,
        hasMore: true,
        checkdeptNames: '',
        checkuserNames: '',
        delQyIds: [],
        showUserTable: true,
        txlTableData: [],
        addTxlPageParams: {
          total: 0,
          page: 1,
          limit: 30,
          name: null,
        },
        workid: "",
        addUserLoading: false,
        queryDeptName: '',
        msgType: 'info',
        msgContent: '是否确认下达?',
        companyId: '1770716421732159489',// 吉林应急公司id
        companyId1: '1804092282752126978',// 小场所公司id
        parentId: '1770716421753131009',// 吉林应急部门id
        parentId1: '1804092282777292801',// 小场所部门id
        belong: false,// 当前人是否属于吉林应急
        belong1: false,// 当前人是否属于小场所
        deptName: '吉林应急',
        deptName1: '小场所',
        deptTreeValue: 0,
				submitLoading: false,
				currentStep: 0, // 当前步骤，初始为0
				steps: [ // 步骤列表
					{
						title: '维护信息'
					},
					{
						title: '选择部门/标签'
					},
          {
            title: '确认下达'
          },
				],
				// 基础表单数据
				baseFormData: {
					sxbt: "",
					sxxz: "",
					jjcd: "",
					jgsj: "",
					sffk: "",
					jzrq: "",
					xdbm: "",
				},
        deptList:[],
				sxxzDict: [],
				sxlxDict: [],
				sffkDict: [],
				jjcdDict: [],
				jgsjDict: [
				  { value: "0.5", text: "半小时" },
				  { value: "1", text: "1小时" },
				  { value: "2", text: "2小时" },
				  { value: "3", text: "3小时" },
				  { value: "5", text: "5小时" },
				  { value: "8", text: "8小时" },
				  { value: "12", text: "12小时" },
				  { value: "24", text: "24小时" },
				  { value: "48", text: "48小时" }
				],
				rules: {
				  sxbt: {
				    rules: [{
				      required: true,
				      errorMessage: '事项标题不能为空'
				    }]
				  },
				  sxxz: {
				    rules: [{
				      required: true,
				      errorMessage: '请选择事项性质'
				    }]
				  },
          xdbm: {
				    rules: [{
				      required: true,
				      errorMessage: '请选择下达部门'
				    }]
				  },
          sxlx: {
				    rules: [{
				      required: true,
				      errorMessage: '请选择事项类型'
				    }]
				  },
				  jjcd: {
				    rules: [{
				      required: true,
				      errorMessage: '请选择紧急程度'
				    }]
				  },
				  sffk: {
				    rules: [{
				      required: true,
				      errorMessage: '请选择是否反馈'
				    }]
				  },
				  jzrq: []
				},

				current: 0,
				items: ['部门', '标签'],
				checkList: [],//选中的tab
				tabList: [],
				checkTreeIds: [],//选中的部门ID
				deptTree: [],
        deptTree1: [],
				defaultProps: {
					children: 'children',
					label: 'name',
          isLeaf: 'isLeaf'
        },

				uploadParam: {
					// 上传的图片服务器地址
					uploadUrl: config.baseUrl + "/common/upload",
					headers: {
						Authorization: "Bearer " + getToken()
					},
					fileType: [
						["doc", "xls", "ppt", "txt", "pdf"],
					],
					fileList: [],
				},
			}
		},
    watch: {
      // 根据名称筛选部门树
      queryDeptName(val) {
        if (this.deptTreeValue==1){
          debugger
          this.$refs.tree.filter(val);
        }
        if (this.deptTreeValue==2){
          this.$refs.tree1.filter(val);
        }

      },
      'addTxlPageParams.name': function (val) {
        console.log(val);
        this.addTxlPageParams.page = 1;
        this.getSelectUserPage()
      }
    },
		created() {
      uni.onKeyboardHeightChange(res => {
        let keyboardHeight = res.height;
        if (keyboardHeight > 0) {
          this.showBtn = true;
        } else {
          this.showBtn = false;
        }
      })
			// 字典翻译
			getDicts("sxxz").then(response => {
				for (let item of response.data) {
					this.sxxzDict.push({"text": item.dictLabel, "value": item.dictValue})
				}
			});
      getDicts("sxlx").then(response => {
				for (let item of response.data) {
					this.sxlxDict.push({"text": item.dictLabel, "value": item.dictValue})
				}
			});
			getDicts("sffk").then(response => {
				for (let item of response.data) {
					this.sffkDict.push({"text": item.dictLabel, "value": item.dictValue})
				}
			});
			getDicts("jjcd").then(response => {
				for (let item of response.data) {
					this.jjcdDict.push({"text": item.dictLabel, "value": item.dictValue})
				}
			});
      this.getUserDepartment();
      this.getUserLabelList();
		},
		onReady() {
		  this.$refs.form.setRules(this.rules)
		},
		methods:{
      selectionChange(){
        this.count = this.$refs.txlTable.selection.length;// 获取选中的表格
      },
      rowKey(row){
        return row.userName;
      },
      delSelectTxlTablee() {
        let selection = this.$refs.txlTable.selection;// 获取选中的表格
        if (selection.length == 0) {
          this.$modal.msgError("请选择要删除的数据");
          return;
        }
        this.$modal.confirm("确认删除么？").then(res => {
          debugger
          delSelectUser({userFks: selection,workid:this.workid}).then(res => {
            if (res.code == 200) {
              this.$modal.msgSuccess("删除成功");
              this.addTxlPageParams.page = 1;
              this.getSelectUserPage();
            } else {
              this.$modal.msgError("删除失败", res.msg);
            }
          });
        })
      },
      scrolltolower() {
        if (!this.hasMore) {
          return;
        }
        this.addTxlPageParams.page += 1;
        getSelectUserPage({...this.addTxlPageParams, workid: this.workid,flag:true}).then(res => {
          this.txlTableData = [...this.txlTableData, ...res.rows];
          if (res.rows.length < this.addTxlPageParams.limit || res.total == this.txlTableData.length) {
            this.hasMore = false;
          }
        })
      },
      getSelectUserPage() {
        this.isLoading = true;
        this.hasMore = true
        getSelectUserPage({...this.addTxlPageParams, workid: this.workid,flag:true}).then(res => {
          this.isLoading = false;
          this.txlTableData = res.rows;// 赋值表格数据
          this.addTxlPageParams.total = res.total;
        })
      },
      addSelectUser() {
        // 重置数据
        this.addTxlPageParams.page = 1;
        this.addTxlPageParams.total = 0;
        this.hasMore = true
        this.workid = new Date().getTime() + Math.random().toString(36).substr(2);// 每次进入选择部门页面生成一个唯一的id

        this.addUserLoading = true;
        let selectDepts= [];
        if (this.deptTreeValue ==1){
          debugger
          selectDepts = this.$refs.tree.getCheckedNodes()
        }else if(this.deptTreeValue ==2){
          selectDepts = this.$refs.tree1.getCheckedNodes()
        }
        let deptIds =selectDepts .map(d => d.id);
        deptIds = selectDepts.filter(dept => !deptIds.includes(dept.parentId));
        const checkTabIds = this.checkList.map(String);
        this.checkdeptNames = deptIds.map(d => d.name).join('、');

        let data = {
          "deptIds": deptIds.map(d => d.id),
          "tabIds": checkTabIds,
          "workid":this.workid
        }
        andUserByDeptAndLaber(data).then(res => {
          if (res.code == 200) {
            this.getSelectUserPage();
            this.addUserLoading = false;
          } else {
            this.$modal.msgError(res.msg);
          }
        })
        this.currentStep++; // 增加当前步骤索引
      },
      // 筛选节点
      filterNode(value, data) {
        if (!value) return true;
        return data.name.indexOf(value) !== -1;
      },
      dialogConfirm(){
        let selection = this.$refs.txlTable.selection;// 获取选中的表格
        this.submitLoading = true
        const data = {
          'rwb': this.baseFormData,
          'workid': this.workid,
          'fjbs': this.uploadParam.fileList,
          'userFks': selection,
          'ly': '2'
        }
        addxdwj(data).then(res1 => {
          this.submitLoading = false;
          getXdrwByWorkid({workid:this.workid}).then(res2 => {
            if(res2.code == 200) {
              this.$modal.msgSuccess("添加成功)");
              uni.navigateTo({
                url: `/pages/home/through/ckRwxx?sid=${res2.data.sid}` // 假设你要跳转的页面路径为/pages/target/target
              });
            }
          })
          // 发送通知
          this.baseFormData.sid = res1.sid;
          messageSendByLimit({ rwb: this.baseFormData ,workid:res1.workid});					// uni.navigateBack()
          // ssmSendByLimit({ rwb: this.baseFormData ,workid:res1.workid});
        }).catch(err => {
          console.log('err', err);
          this.$modal.msgError("添加失败");
          this.submitLoading = false;
        });
      },
      dialogClose(){

      },
      async loadNode(node, resolve) {
        const companyId = this.companyId;
        // 假设你有一个异步的方法来获取节点的子节点
        if (node.level === 0) {
          let data = [];

          let result =  await getDepartmentList1({parentId: this.parentId,companyId}).then(res => {
            data = res.data
            return true
          })
          if (result)
            return resolve(data)
        }
        // 如果节点有子节点，则返回子节点数据
        getDepartmentList1({parentId:node.data.id,companyId}).then(res => {
          resolve(res.data)
        })
      },
      async loadNode1(node, resolve) {
        const companyId = this.companyId1;
        // 假设你有一个异步的方法来获取节点的子节点
        if (node.level === 0) {
          let data = [];

          let result =  await getDepartmentList1({parentId: this.parentId1,companyId}).then(res => {
            data = res.data
            return true
          })
          if (result)
            return resolve(data)
        }
        // 如果节点有子节点，则返回子节点数据
        getDepartmentList1({parentId:node.data.id,companyId}).then(res => {
          resolve(res.data)
        })
      },
      getUserLabelList() {
        getUserLabelList({}).then(res => {
          this.tabList = res.data;
        });
      },
			goToBackStep() {
        console.log(this.currentStep);
        if (this.currentStep == 2) {
          delRedisUserByKey({workid:this.workid}).then(res=>{})// 删除上一次添加的人员
        }
        this.currentStep--;
			},
			goToNextStep() {
				if (this.currentStep === 0) {
					this.$refs.form.validate().then(res => {
						if(this.baseFormData.jjcd === '2' && this.baseFormData.jgsj == ""){
							this.$modal.msgError("请选择间隔时间");
							return false;
						}
						if(this.baseFormData.jjcd === '1'){
							this.baseFormData.jgsj = ""
						}

						if(this.baseFormData.sffk === '1' && this.baseFormData.jzrq == ""){
							this.$modal.msgError("请选择截止日期");
							return false;
						}
						if(this.baseFormData.sffk === '2'){
							this.baseFormData.jzrq = ""
						}
						console.log(this.baseFormData)
						this.currentStep++; // 增加当前步骤索引
					}).catch(err => {
						console.log('err', err);
					})
				} else if (this.currentStep === 1) {
          debugger
          this.currentStep++; // 增加当前步骤索引
				} else if (this.currentStep === 2) {
          debugger
          this.currentStep++; // 增加当前步骤索引
        }
			},
      getUserDepartment(){
        this.belong = false;
        this.belong1 = false;
        this.deptTreeValue = 0;
        console.log(this.deptTreeValue);
        getUserDepartment().then(res=>{
          debugger
          let data = res.data;
          for (let item of data) {
            this.deptList.push({"text": item.name, "value": item.name})
          }
          let b = true;
          data.forEach(d => {
            if (d.companyId == this.companyId) {// 有吉林应急权限
              this.belong = true
              if(b){
                this.deptTreeValue = 1;// 默认展示部门
                b = false;
              }
            }
            if (d.companyId == this.companyId1) {// 有小场所权限
              this.belong1 = true
              if(b){
                this.deptTreeValue = 2;// 默认展示部门
                b = false;
              }
            }
          })
          console.log(this.deptTreeValue);
        })
      },
			changeSxxzDict(e){
				this.baseFormData.sxxz = e
			},
      changeSxlxDict(e){
				this.baseFormData.sxlx = e
			},
			changeJjcdDict(e){
				this.baseFormData.jjcd = e.detail.value
			},
			changeJgsjDict(e){
				this.baseFormData.jgsj = e
			},
			changeSffkDict(e){
				this.baseFormData.sffk = e.detail.value
			},
			submitUpload() {
			      this.$refs.upload.submit();
			},
			// 上传失败
			handleUploadError(err) {
			  console.log("上传失败...")
			  this.$modal.msgError("上传文件失败，请重试");
			  this.$modal.closeLoading();
			},
			rwBeforeUpload(file) {
			  console.log("上传前...");
			},
			handleChange(file, fileList) {
			  this.uploadParam.fileList = fileList;
			},
			// 上传成功回调
			handleUploadSuccess(res, file) {
			  console.log("上传成功...");
			},
			// 移除附件操作
			removeFile(file, fileList) {
			  this.uploadParam.fileList = fileList;
			},
			onClickItem(e) {
			  if (this.current != e.currentIndex) {
				this.current = e.currentIndex;
			  }
			},
			check(){
        // let selectDepts= this.$refs.tree.getCheckedNodes();
        // let deptIds =selectDepts .map(d => d.id);
        // deptIds = selectDepts.filter(dept => !deptIds.includes(dept.parentId));
				// this.checkTreeIds = deptIds.map(d => d.id)
			},
      handleCommand(){
        if (this.deptTreeValue == 1) {// 吉林应急切换小场所
          if (this.belong1) {
            this.deptTreeValue = 2;
          } else {
            this.$message.warning(`没有${this.deptName1}部门权限`);
          }
        } else if (this.deptTreeValue == 2) {// 小场所切换吉林应急
          if (this.belong) {
            this.deptTreeValue = 1;
          } else {
            this.$message.warning(`没有${this.deptName}部门权限`);
          }
        }
      },
      openDialog(){
        let selectDepts= [];
        if (this.deptTreeValue ==1){// 吉林应急部门树
          selectDepts= this.$refs.tree.getCheckedNodes();
        }else if(this.deptTreeValue ==2){// 小场所部门树
          selectDepts= this.$refs.tree1.getCheckedNodes();
        }
        if (selectDepts.length==0){
          this.$modal.msgError("请选择下达部门");
          return;
        }
        let deptIds =selectDepts.map(d => d.id);
        let parentDept = selectDepts.filter(dept => !deptIds.includes(dept.parentId));// 获取一级部门
        this.checkTreeIds = parentDept.map(d => d.id);
        let checkdeptNames = parentDept.map(d => d.name).join('、');
        this.msgContent = `你确定下达给 "${checkdeptNames}" 么?`;
        this.$refs.alertDialog.open();
      },
			submit() {
        let selection = this.$refs.txlTable.selection;// 获取选中的表格
        if (selection.length == 0) {
          this.$modal.msgError("请选择要下达的人员");
          return;
        }
        // this.$modal.confirm(
        //     `下达内容为：${this.baseFormData.xdnr}
        //       是否确定下达给 "${this.checkdeptNames}" 部门?`
        // ).then(function() {
        // }).then(() => {
        this.checkuserNames = selection.map(u => u.name).join('、');
        this.$refs.alertDialog.open();

			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f5f6f7;
	}

	.container {
		background-color: white;
		margin: 20rpx;
		border-radius: 20rpx;
	}

	.example {
	  padding: 15px;
	  background-color: #fff;
	}

	.fixed-bottom {
		position: fixed;
		bottom: var(--window-bottom);
		bottom: 0;
		width: 95%;
		margin-bottom: 20rpx;
		z-index: 1;
	}

	.two_button {
		display: flex;
	}

	.article {
		background-color: white;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
	}

	.tabClass {
		font-size: 80rpx;
		margin-left: 40rpx;
		margin-right: 400rpx;
	}

</style>
